<template>
  <div class="home">
    <router-link class="select" to="/selectCity">{{ city }}</router-link>
    <img src="@/assets/img/banner.png" alt="" class="banner" />
    <cov-info :covNew="covNew"></cov-info>
    <!-- 小导航 -->
    <div class="menu">
      <XRouterlink :to="{path:'https://m.dxy.com/sections?dxa_adplatform=yqdticon'}">
      <!-- <router-link to="/askdoc"> -->
        <template>
          <div>
          <img src="@/assets/img/menu-01.png" alt="" />
          <span>问医生</span>
          </div>
        </template>
      <!-- </router-link> -->
      </XRouterlink>
      <router-link to="/riskarea">
        <div>
          <img src="@/assets/img/menu-02.png" alt="" />
          <span>风险地区</span>
        </div>
      </router-link>
      <router-link to="/prevention">
        <div>
          <img src="@/assets/img/menu-03.png" alt="" />
          <span>防疫物资</span>
        </div>
      </router-link>
      <router-link to="/travel">
        <div>
          <img src="@/assets/img/menu-04.png" alt="" />
          <span>出行政策</span>
        </div>
      </router-link>
    </div>

    <!-- 国内数据 -->
    <cov-data :covData="covData"></cov-data>

  <!-- 表格 -->
  <cov-table></cov-table>

    <!-- 地图 -->
    <china-map></china-map>
    <!-- 世界地图 -->
    <world-map></world-map>

    <!-- 轮播图 -->
    <vue-swiper></vue-swiper>
  </div>
</template>

<script>
import CovInfo from "./CovInfo/CovInfo.vue";
import CovData from "./Covdata.vue";
import ChinaMap from "./VueEchart/ChinaMap.vue";
import WorldMap from "./VueEchart/WorldMap.vue";
import VueSwiper from "./VueSwiper/VueSwiper.vue";
import CovTable from "./Covtable/CovTable.vue";
import XRouterlink from "../../components/XRouterlink.vue";
import api from "../../api/index.js";

export default {
  name: "Home",
  components: {
    CovInfo,
    CovData,
    ChinaMap,
    WorldMap,
    VueSwiper,
    CovTable,
    XRouterlink
  },
  data() {
    return {
      covDesc: {},
      covNew: [],
      covData: {},
      city: "国内疫情",
    };
  },
  methods:{
  },
  created() {
    //接收一下城市
    let city = localStorage.getItem("city");
    if (city) {
      this.city = city + "疫情";
    }
    //请求病毒新闻接口
    api.getCovInfo().then((res) => {
      // if (res.status !== 200) return console.log("疫情信息获取失败");
      // console.log(res)
      this.covNew = [...res.data.newslist[0].news];
      const desc = res.data.newslist[0].desc;
      //console.log(res.data.newslist[0]);
      this.covData = {
        currentConfirmedCount: desc.currentConfirmedCount,
        confirmedCount: desc.confirmedCount,
        suspectedCount: desc.suspectedCount,
        curedCount: desc.curedCount,
        deadCount: desc.deadCount,
        seriousCount: desc.seriousCount,
        suspectedIncr: desc.suspectedIncr,
        currentConfirmedIncr: desc.currentConfirmedIncr,
        confirmedIncr: desc.confirmedIncr,
        curedIncr: desc.curedIncr,
        deadIncr: desc.deadIncr,
        seriousIncr: desc.seriousIncr,
        yesterdayConfirmedCountInc: desc.yesterdayConfirmedCountInc,
        yesterdaySuspectedCountInc: desc.yesterdaySuspectedCountInc,
        highDangerCount: desc.highDangerCount,
        midDangerCount: desc.midDangerCount,
        modifyTime: desc.modifyTime,
      };
    });
  },
};
</script>

<style lang="less" scoped>
.router-link-active {
  text-decoration: none;
  color: #333;
}
a {
  text-decoration: none;
  color: #333;
}
.home {
  position: relative;
  margin: 0 auto;
  .select {
    position: absolute;
    top: 0.3rem;
    right: 0.2rem;
    color: #fff;
    padding: 8px 10px;
    border: 1px solid #fff;
    border-radius: 20px;
  }
}
.banner {
  width: 100%;
}
.menu {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgb(224, 224, 224);
  margin: 0 0.3rem;
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3rem 0;
  }
  img {
    width: 0.8rem;
  }
}
</style>